<template>
	<view class="page-main">
		<view class="header">
			<!-- <view class="tip">
				{{ title }}
			</view> -->
			<view class="menus">
				<view class="menu-item" v-for="item in menusList" @click="changeMenu(item)">
					<view >
						<image :style="{ backgroundColor: item.color }" class="menu-item-icon" :src="item.imgUrl"></image>
						<view v-if="item.id==2&&requestList.length!=0" class="badge"></view>
					</view>
					<view class="menu-item-text">{{ item.text }}</view>
				</view>
			</view>
			<view :class="'selected-border'+selectedMenuId">
				<view class="selected-menu"></view>
			</view>	
		</view>
		<view class="content">
			<view class="list">
				<view v-if="selectedMenuId==1" class="list-item" v-for="item in notificationList" @click="linkToChat(item)">
					<view class="dot-box" v-if="item.is_read == 0&&item.from_id!=myInfo.id"></view>
					<u-avatar class="list-item-avatar" :src="item.avatar" size="110"></u-avatar>
					<view class="list-item-content">
						<text style="font-size: 40rpx;margin-bottom: 10rpx;">{{ item.username }}</text>
						<view class="message">
							<text v-if="item.msg_type==0" style="width: 60%;overflow:hidden; 
text-overflow:ellipsis; 
white-space:nowrap; " >{{ item.content }}</text>
							<text v-else>[图片]</text>
							<text style="font-size: 20rpx;width: 30%;margin-left: auto;text-align: left;">{{ handleTime(item.create_time) }}</text>
						</view>
					</view>
				</view>
				<view v-if="selectedMenuId==2&&newfriend==1" style="display: flex;justify-content: space-between;background-color: white;height: 70rpx;padding: 20rpx;" @click="handleFriendRequest">
					<u-icon style="padding-left: 20rpx;" size="40" name="bell"></u-icon>
					<view style="margin-left: -280rpx;margin-top: -5rpx;">
					<view style="font-weight: bold;">好友请求</view>
					<view>{{requestcontent}}</view>
					</view>
					<u-icon size="40" name="arrow-right"></u-icon>
				</view>
				<view v-if="selectedMenuId==2" class="list-item" v-for="item in friendList" @click="linkToChat(item)">
					<u-avatar class="list-item-avatar" :src="item.avatar" size="110"></u-avatar>
					<view class="list-item-content">
						<text style="font-size: 40rpx;margin-bottom: 10rpx;">{{ item.username }}</text>
					</view>
				</view>
				<view v-if="selectedMenuId==3" class="list-item" v-for="item in groupList" @click="linkToChat(item,1)">
					<u-avatar class="list-item-avatar" :src="item.avatar" size="110"></u-avatar>
					<view class="list-item-content">
						<text style="font-size: 40rpx;margin-bottom: 10rpx;">{{ item.name }}</text>
					</view>
				</view>
		</view>
	</view>
	</view>
</template>

<script>
	import { getFriends, getGroups, getNotifications } from '../../common/api.js'
	
	
	export default {
		data() {
			return {
				myInfo: '',
				menusList: [
					{
						id: 1,
						imgUrl: "../../static/group-notification.png",
						text: "聊天",
						color: '#fdde97'
					},
					{
						id: 2,
						imgUrl: "../../static/partner-notification.png",
						text: "列表",
						color: '#fe8466'
					},
					{
						id: 3,
						imgUrl: "../../static/notification.png",
						text: "通知",
						color: ' #faa56f'
					}
				],
				selectedMenuId: 1,
				title: '消息通知',
				notificationList: [],
				friendList: {},
				groupList: [],
				requestcontent: "请求添加为好友",
				newfriend: "",
				requestList: {}
			}
		},
		onShow() {
			
			
			// this.$H.get("user/userInfo").then(res => {
			
			// 	this.myInfo = res.result
				
				 
			// 	// if (res.result.gender === 1) {
			// 	// 	this.userInfo.gender = '男'
			// 	// } else if (res.result.gender === 2) {
			// 	// 	this.userInfo.gender = '女'
			// 	// } else {
			// 	// 	this.userInfo.gender = '保密'
			// 	// }
									
									
			// })
			// uni.hideTabBarRedDot({ //隐藏红点
			//   index:2
			// })
			// console.log(this.myInfo)
			this.myInfo = uni.getStorageSync("userInfo")
			
			this.getNewFriendRequest()
			this.getNotificationList()
			// 接收服务器发来的数据
			this.websocket.onMessage(evt => {
				let data = JSON.parse(evt.data).message
				let msg = JSON.parse(data)
				console.log("zzz")
				let i =0
				for(i=0; i < this.notificationList.length;i++){
					if(msg.fromId == this.notificationList[i].fromId){
						console.log("zzz")
						// this.notificationList[i].is_read = 0
						this.notificationList[i].msgType = msg.msgType
						this.notificationList[i].content = msg.content
						let temp = this.notificationList[i]
						this.notificationList.splice(i, 1)
						this.notificationList.unshift(temp)
						break
					}
				}
				if(i == this.notificationList.length) this.notificationList.unshift(msg)
			})
		},
	
		methods: {
			getNotificationList(){
				let params = {
					myId: this.myInfo.id
				}
				getNotifications({params}).then(res => {
					this.notificationList = res.data
				})
			},
			getGroupList() {
				let params = {
					userId: this.myInfo.id
				}
				getGroups({params}).then(res => {
					this.groupList = res.data
				})
			},
			getFriendList() {
				let params = {
					id: this.myInfo.id
				}
				getFriends({params}).then(res => {
					this.friendList = res.data
					
				})
			},
			
			changeMenu(item){
				console.log(item)
				this.selectedMenuId = item.id
				switch(item.id){
					case 1:	this.getNotificationList();
							this.title = "聊天";
							break;
					case 2: this.getFriendList();
							this.title = "列表";
							break;
					// case 3: this.getGroupList();
					// 		this.title = "通知";
					// 		break;
				}
			},
			handleFriendRequest(){
				uni.navigateTo({
					url:'/pages/contact/newfriendrequestlist/newfriendrequestlist?list='+JSON.stringify(this.requestList)
				})
				
			},
			linkToChat(info, type=0){ // 0表示私聊，1表示群聊
				let url = '/pages/contact/chat?id='+info.id+'&avatar='+info.avatar+'&username='+info.username + '&type=0'+'&from_articleId='+info.from_articleId

				if(this.selectedMenuId === 1)
					url = '/pages/contact/chat?id='+info.receiver+'&avatar='+info.avatar+'&username='+info.username + '&type=0'
				if(type === 1)
					url = '/pages/contact/chat?id='+info.receiver+'&avatar='+info.avatar+'&username='+info.name + '&type=1'
				uni.navigateTo({
					url
				})
			},
			// 处理时间格式
			handleTime(date){
				if(date=='') return
				var time;
				var d = new Date(date);
				var n = new Date();
				//获取时间戳
				var dd = d.getTime();
				var h = d.getHours();
				var m = d.getMinutes();
				var Y = d.getFullYear();
				var M = d.getMonth() + 1;
				var D = d.getDate();
				//现在时间
				var nn = n.getTime();
				var hh = n.getHours();
				var mm = n.getMinutes();
				var YY = n.getFullYear();
				var MM = n.getMonth() + 1;
				var DD = n.getDate();
				
				if( D == DD && M == MM && Y ==YY){
					if(h<10){
					h = '0'+h;
					}
					if(m<10){
						m = '0'+m;
					}
					time = h+':'+m;
					return time;
				}else if(D+1 == DD && M == MM && Y ==YY){
					if(h<10){
					h = '0'+h;
					}
					if(m<10){
						m = '0'+m;
					}
					time = '昨天'+' '+h+':'+m;
					return time;
				}else if(Y === YY){
					// 今年
					if(M<10){
						M = '0'+M;
					}
					if(D<10){
						D = '0'+D;
					}
					if(h<10){
					h = '0'+h;
					}
					if(m<10){
						m = '0'+m;
					}
					time = M+'月'+D+'日'+' '+h+':'+m;
					return time;
				}else {
					// 大于今年
					if(M<10){
						M = '0'+M;
					}
					if(D<10){
						D = '0'+D;
					}
					if(h<10){
					h = '0'+h;
					}
					if(m<10){
						m = '0'+m;
					}
					time = Y+'年'+M+'月'+D+'日'+' '+h+':'+m;
					return time;
				}
			},
			getNewFriendRequest(){
				this.$H.get('friends/getNewFriendRequest').then(res=>{
					if(res.code==200&&res.msg=="success"){
						this.requestList=res.result
						this.newfriend=1
						this.requestcontent=this.requestList.length+"人请求加为好友"
						console.log("111",this.requestList)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.dot-box{
		width: 30rpx;
		height: 30rpx;
		background-color: red;
		border-radius: 20rpx;
		position: absolute;
		/* bottom: 0; */
		left: 25rpx;
		z-index: 2;
	}
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.page-main{
		height: 100%;
	}
	 .badge {
	    position: absolute;
	    top: -80px;
	    right: -60px;
	    background-color: red;
	    color: white;
	    border-radius: 50%;
	    width: 20rpx;
	    height: 20rpx;
	    text-align: center;
	   
	    font-size: 12px;
	    z-index: 1;
	  }
	.header{
		width: 100%;
		height: 340rpx;
		position: fixed;
		top: 0;
		z-index: 100;
		background-color: #ffffff;
		.tip{
			margin-top: 60rpx;
			padding: 10rpx 0;
			width: 36%;
			color: white;
			font-size: 40rpx;
			background-color: #aab6eb;
			display: flex;
			justify-content: center;
		}
		.menus{
			padding: 70rpx 12rpx;
			display: flex;
			flex-direction: row;
			align-content: center;
			justify-content: space-around;
			.menu-item{
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				.menu-item-icon {
					width: 80rpx;
					height: 80rpx;
					padding: 25rpx;
					background-color: #94c3f3;
					border: solid #f7eeee 7rpx;
					border-radius: 40rpx;
				}
				.menu-item-text {
					
				}
			}
		}
		.selected-border1{
			background-color: #f1f1f1;
			height: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
		}
		.selected-border2{
			background-color: #f1f1f1;
			height: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		}
		.selected-border3{
			background-color: #f1f1f1;
			height: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}
		.selected-menu{
			width: 30%;
			background-color: #bebebe;
			// border: solid #bebebe 5rpx;
		}
	}
	.content {
		padding-bottom: 130rpx;
		position: relative;
		top: 340rpx;
		.list{
			background-color: #ffffff;
			.list-item{
				padding: 30rpx;
				border-bottom: solid #e8e8e8 1px;
				display: flex;
				flex-direction: row;
				.list-item-content{
					width: 80%;
					margin-left: 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					// justify-content: space-evenly;
					.message{
						font-size: 28rpx;
						color: gray;
						display: flex;
						flex-direction: row;
						width: 100%;
						// justify-content: space-between;
					}
				}
			}
		}
	}
</style>
